<template>
  <div class="bar custom" style="background-color: #ffffff;">
    <div class="title">
      <span>返修件基础信息</span>
    </div>
    <a-form-model
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      v-bind="layout"
    >
      <a-form-model-item label="快递公司" prop="expressCompany">
        <a-input v-model="formData.expressCompany" allow-clear />
      </a-form-model-item>

      <a-form-model-item label="快递单号" prop="expressNumber">
        <a-input v-model="formData.expressNumber" allow-clear />
      </a-form-model-item>

      <a-form-model-item label="返回联系人" prop="returnContactName">
        <a-input v-model="formData.returnContactName" allow-clear />
      </a-form-model-item>

      <a-form-model-item label="联系人电话" prop="returnContactPhone">
        <a-input v-model="formData.returnContactPhone" allow-clear />
      </a-form-model-item>

      <a-form-model-item label="订单指派" prop="assignUsername">
        <a-select
          v-model="formData.assignUsername"
          style="width: 100%;"
          allow-clear
          show-search
          placeholder="请输入人名"
          :options="assignLists"
          :filter-option="filterAssignUsername"
        >
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="返回地址" prop="returnAddress">
        <a-textarea
          v-model="formData.returnAddress"
          :autoSize="{ minRows: 2, maxRows: 4 }"
          allow-clear
        />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import api from "@/server/userConfig";

export default {
  name: "CustomForm",
  components: {},
  props: {},
  data() {
    return {
      assignLists: [],
      formData: {
        expressCompany: "",
        expressNumber: "",
        returnContactName: "",
        returnContactPhone: "",
        assignUsername: "",
        returnAddress: ""
      },
      rules: {
        expressCompany: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "blur"
          }
        ],
        expressNumber: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "blur"
          }
        ],
        returnContactName: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "blur"
          }
        ],
        returnContactPhone: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "blur"
          }
        ],
        assignUsername: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "blur"
          }
        ],
        returnAddress: [
          {
            required: true,
            message: "信息不能为空",
            trigger: "blur"
          }
        ]
      },
      layout: {
        layout: "horizontal",
        labelAlign: "right",
        hideRequiredMark: true,
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      }
    };
  },
  computed: {},
  watch: {
    // info: function(newVal, oldVal) {
    // }
  },
  methods: {
    async getAssignList(parames, key) {
      const res = await api.getAssignList({ ...parames });

      if (res.msgCode !== 0) {
        return;
      }

      this[key] = buildSelectOption(res.data);

      function buildSelectOption(lists) {
        let _lists = [];

        _lists = lists.map((item, index) => {
          let { operator, username } = item;
          return {
            label: `${operator}  ${username}`,
            value: `${operator},${username}`
          };
        });

        return _lists;
      }
    },
    filterAssignUsername(input, option) {
      let str = input.replace(/\s*/g, "");
      let name = option.componentOptions.children[0].text;

      if (name == "" || name == undefined || str == "" || str == undefined) {
        return false;
      } else {
        let isMatch = name.indexOf(str) >= 0;
        return isMatch;
      }
    },
    getFormData() {
      let _this = this;
      return new Promise((resolve, reject) => {
        let formName = "ruleForm";
        _this.$refs[formName].validate(valid => {
          let validData = {
            isValid: valid,
            data: _this.formData
          };
          resolve(validData);
        });
      });
    }
  },
  mounted() {
    this.getAssignList({ operator: "", companyId: "" }, "assignLists");
  }
};
</script>

<style scoped="scoped">
.custom /deep/ .ant-form-item {
  width: 24.8%;
  display: inline-block;
}

.bar {
  width: 100%;
  background-color: #ffffff;
  padding: 0px 16px;
}

.bar > .title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1890ff;
  padding: 0px 0px 16px 0px;
}
</style>
